.archived-free-modal {
    .ant-modal-body {
        padding: 0 !important;
    }

    .archived-free {
        display: flex;
        height: 100%;

        .archived-free-introduce {
            width: 30%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            .archived-title {
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 20px;
                
            }

            .archived-desc {
                font-size: 12px;
                color: #999;
            }

            .archived-desc-box {
                flex: 1;
                padding: 20px 0;
                .archived-desc-item {
                    display: flex;
                    align-items: center;
                    gap: 5px;   
                    height: 40px;
                    padding: 0 20px;
                    cursor: pointer;
                    border-radius: 10px;
                    margin: 10 0;
                }
                .archived-desc-active-item {
                    background: #f4f5f6;
                }
                .archived-desc-item:hover {
                    background: #f4f5f6;
                }
            }
    
            .ant-btn-primary {
                border-radius: 5px;
                margin-bottom: 20px;
            }
        }

        .archived-free-image {
            height: 100%;
            background-color: #f4f5f6;
            flex: 1;
            display: flex;
            align-items: center;
            padding: 40px;

            img {
                border-radius: 5px;
            }
        }

        
    }

}